<template>
  <view class="blog-component-radar-core-warp" :style="[warpStyle,warpBodyStyle]" @click="$emit('onClickListener')">
    <view class="blog-component-radar-core-line" v-for="item in lineMap" :style="[item.style]">
      <slot v-if="item.sector&&makeRadar"></slot>
      <view :class="['blog-component-radar-core-radar',startAnimation? animationClassName:'']" :style="[radarStyle]"
            v-if="item.sector&&makeRadar"/>
    </view>
    <slot name="warp"></slot>
  </view>
</template>

<script>
export default {
  props: {
    lineColor: {
      type: String,
      default: "#33aaff"
    },
    lineWidth: {
      type: Number,
      default: 1
    },
    animationClassName: {
      type: String,
      default: "blog-component-radar-core-animation"
    },
    makeRadar: {
      type: Boolean,
      default: true
    },
    startAnimation: {
      type: Boolean,
      default: true
    },
    radarColor: {
      type: String,
      default: "#33aaff"
    },
    radarGradient: {
      type: String,
    },
    lineBorder: {
      type: String,
      default: "solid"
    },
    size: {
      type: Number,
      default: 210
    },
    padding: {
      type: Number,
      default: 0
    },
    linePadding: {
      type: Number,
      default: 40
    },
    warpStyle: {
      type: Object
    }
  },
  data() {
    return {}
  },
  emits: ["onClickListener"],
  computed: {
    lineMap() {
      let map = {}
      let x = this.size - this.padding / 2 - this.lineWidth;
      let count = Math.floor(x / this.linePadding) + 1;
      for (let i = 0; i < count; i++) {
        let length = i * this.linePadding;
        let sector = false;
        if (i === (count - 1)) {
          sector = true;
        }
        map[i] = {
          index: i,
          sector,
          style: {
            border: `${this.lineWidth}px ${this.lineBorder} ${this.lineColor}`,
            height: length + "px",
            width: length + "px",
            borderRadius: "100%"
          }
        };
      }
      return map;
    },
    warpBodyStyle() {
      return {
        width: this.size + "px",
        height: this.size + "px"
      }
    },
    radarStyle() {
      return {
        backgroundImage: this.radarGradient ? this.radarGradient : `linear-gradient(to right, transparent, ${this.radarColor})`,
      }
    }
  },
  methods: {}
}
</script>

<style>

.blog-component-radar-core-warp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-component-radar-core-line {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
}

.blog-component-radar-core-radar {
  position: absolute;
  top: 0;
  right: 0;
  height: 50%;
  width: 50%;
  box-sizing: border-box;
  transform-origin: 0 100%;
}

.blog-component-radar-core-animation {
  -webkit-animation: blog-component-animation-rotate 2s linear infinite;
  animation: blog-component-animation-rotate 2s linear infinite;
}

@keyframes blog-component-animation-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

</style>
